import React, {useState} from "react"
import Editor from '../../components/vector/Editor'
import styles from './App.module.scss'
import {OVEContext} from './context' // OVEContext

const flexStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}

function App(props) {
  // 编辑器父元素
  let wrapDom
  // Context
  const OVEContextData = React.useContext(OVEContext)
  const { windowAreactMethods } = OVEContextData

  // ******************* useState ************************************
  const { injectProps } = props
  const [editHeight, setEditHeight] = useState(injectProps.v_editHeight)
  const [editorName, setEditorName] = useState(injectProps.v_editorName)
  const [withPreviewMode, setWithPreviewMode] = useState(injectProps.v_previewMode)
  const [updateProps, setUpdateProps] = useState(JSON.parse(injectProps.v_updatePropsJson))
  const [sequenceData, setSequenceData] = useState(injectProps.v_defaultData)
  const [showCustomComponent, setShowCustomComponent] = useState(injectProps.v_showComponent)
  const [domComponentID, setDomComponentID] = useState(injectProps.v_comptOptions)
  const [previewSettingsProps, /*setPreviewSettingsProps*/] = useState(injectProps.v_previewSettingsProps ? JSON.parse(injectProps.v_previewSettingsProps) : null)
  const [versionList] = useState(injectProps.v_versionList)
  const [initDarkMode] = useState(injectProps.v_initDarkMode)
  const [moduleTag, /*setModuleTag*/] = useState(injectProps.v_moduleTag)

  // ******************* window 挂载组件的方法 start ************************************
  windowAreactMethods.setEditorName = setEditorName // 插件实例化的名称，用于更新
  windowAreactMethods.setUpdateProps = setUpdateProps // 设置更新时的 props
  windowAreactMethods.setSequenceData = setSequenceData // 设置更新的数据
  windowAreactMethods.setWithPreviewMode = setWithPreviewMode // 设置是否是预览模式
  windowAreactMethods.setEditHeight = setEditHeight // 设置插件的高度
  windowAreactMethods.setShowCustomComponent = setShowCustomComponent // 设置是否展示自定义组件
  windowAreactMethods.setDomComponentID = setDomComponentID // 设置自定义组件

  // 调整 circularViewSvg 预览的高宽
  windowAreactMethods.resetCircularViewSvgWidthAndHeight = (width, height, padding) => {
    let veCircularView = document.querySelector('.veCircularView')
    veCircularView.style.width = `${width}px`
    veCircularView.style.height = `${height}px`
    let circularViewSvg = document.querySelector('.circularViewSvg')
    circularViewSvg.style.width = `${width}px`
    circularViewSvg.style.height = `${height}px`
    circularViewSvg.style.padding = `${padding}px`
  }

  windowAreactMethods.hideViewBtnAndPaddingAndBoxShadow = (previewMode = false, state = true) => {
    if (!previewMode) return
    let domPadding = document.getElementsByClassName('preview-mode-simple-sequence-view')[0]
    domPadding.style.padding = 0
    let domBoxShadow = document.getElementsByClassName('preview-mode-container')[0]
    let domViewBtn = document.getElementsByClassName('preview-mode-buttons')[0]
    domViewBtn.style.opacity = 0

    if (state) {
      domViewBtn.style.display = 'none'
      domBoxShadow.firstChild.style.boxShadow = 'none'
    } else {
      domViewBtn.style.display = 'block'
      domBoxShadow.firstChild.style.boxShadow = '0 0 3px #ccc'
    }
  }
  // ******************* window 挂载组件的方法 end ************************************

  // 获取dom的高度
  React.useEffect(() => {
    let height = wrapDom.clientHeight
    setEditHeight(height)
  }, [wrapDom])

  React.useEffect(
    () => {}, 
    [editorName, updateProps, sequenceData, withPreviewMode, setEditHeight, showCustomComponent, domComponentID, props.showApp]
  )

  return (
    <div ref={el=> (wrapDom = el)} className={styles.App}>
      <div className={styles.editCoat} style={withPreviewMode ? flexStyle : null}>
          <Editor 
            windowAreactMethods={windowAreactMethods}
            editorName={editorName}
            initData={sequenceData}
            updateProps={updateProps}
            previewSettingsProps={previewSettingsProps}
            componentID={domComponentID}
            showCustomComponent={showCustomComponent}
            versionList={versionList}
            initDarkMode={initDarkMode}
            moduleTag={moduleTag}
            customProps={{
              withPreviewMode: withPreviewMode,
              height: editHeight,
            }} 
          />
      </div>
    </div>
  );
}

export default App;
